<template>
    <div id="app">
        <eHeader :options="options" title="首页" v-if="!showHead" />
        <md-transition :name="direction === 0 ? 'md-slide-right':'md-slide-left'">
            <router-view :class="routerClass" v-wechat-title="$route.meta.name" />
        </md-transition>
    </div>
</template>
<script>
import eHeader from "./components/eHeader/index.tsx";
import { AppModule, DirectionType } from "@/store/modules/app.ts";
import "./styles/app.styl";
export default {
    components: { eHeader },
    data() {
        return {
            options: {
                shadow: true
            }
        };
    },
    computed: {
        showHead() {
            return AppModule.appOptions.hideHead;
        },
        routerClass() {
            return AppModule.appOptions.hideHead
                ? "no-head router-view"
                : "router-view";
        },
        direction() {
            return AppModule.direction;
        }
    }
};
</script>
<style lang="stylus">
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    overflow: hidden;
}

body, html {
    background: #f5f5f9;
    height: 100vh;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    overflow: hidden;
}

.router-view {
    top: 44PX;
    z-index: 1;
    background: #f5f5f9;
    position: fixed;
    height: 100%;
    transition: transform 0.3s ease;
    overflow: hidden;
}

.no-head {
    top: 0;
    padding-top: 44PX;
    box-sizing: border-box;
}
</style>
